<template>
    <section class="form-container">
        <el-form ref="filterRef" :inline="true"  :model="filter" size="mini" class="form-filter" label-width="130px">
            <el-form-item label="UID" prop="uid">
                <el-input v-model="filter.uid" placeholder="请输入条件查询"/>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="filter.companyName" placeholder="请输入条件查询" />
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="companyCode">
                <el-input v-model="filter.companyCode" placeholder="请输入条件查询" />
            </el-form-item>
            <el-form-item label="联系人" prop="contactName">
                <el-input v-model="filter.contactName" placeholder="请输入条件查询" />
            </el-form-item>
            <el-form-item label="联系人手机号" prop="contactMobile">
                <el-input v-model="filter.contactMobile" placeholder="请输入条件查询" />
            </el-form-item>
            <el-form-item label="公司法人" prop="companyLegalPerson">
                <el-input v-model="filter.companyLegalPerson" placeholder="请输入条件查询" @change="getPage()"></el-input>
            </el-form-item>
            <el-form-item label="法人身份证号" prop="companyLegalPersonIdCard">
                <el-input v-model="filter.companyLegalPersonIdCard" placeholder="请输入条件查询"
                          @change="getPage()"></el-input>
            </el-form-item>
            <el-form-item label="法人手机号" prop="companyLegalPersonMobile">
                <el-input v-model="filter.companyLegalPersonMobile" placeholder="请输入条件查询"
                          @change="getPage()"></el-input>
            </el-form-item>
            <el-form-item label="商家状态" prop="checkStatus">
                <el-select v-model="filter.checkStatus" filterable placeholder="请选择" clearable>
                    <el-option
                        v-for="item in Dict.enums.sellerStatus"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label=" " style="display:block;">
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                <el-button @click="resetFilter()" icon="el-icon-refresh-left">重置</el-button>
                <el-button @click="toAddSeller('')" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column width="80" label="头像">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.avatar"
                                  fit="cover">
                            <div slot="error" class="image-slot" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column width="60" prop="uid" label="UID"/>
                <el-table-column prop="companyName" label="公司名称"/>
                <el-table-column prop="companyCode" label="统一社会信用代码"/>
                <el-table-column prop="contactName" label="联系人"/>
                <el-table-column prop="contactMobile" label="联系人手机号"/>
                <el-table-column prop="address" label="公司地址" width="200"></el-table-column>
                <el-table-column prop="companyPhone" label="公司电话"></el-table-column>
                <el-table-column prop="companyBankName" label="开户行"></el-table-column>
                <el-table-column prop="companyBankNo" label="银行账号"></el-table-column>
                <el-table-column prop="companyLegalPerson" label="公司法人"></el-table-column>
                <el-table-column prop="companyLegalPersonIdCard" label="法人身份证号"></el-table-column>
                <el-table-column prop="companyLegalPersonMobile" label="法人手机号"></el-table-column>
                <el-table-column width="80px" label="状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.checkStatusStyle">
                            {{ scope.row.checkStatusName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="updateName" label="更新人"/>
                <el-table-column width="160" prop="updateTime" label="更新时间"/>

                <el-table-column fixed fixed="right" label="操作" width="260">
                    <template #default="scope">
                        <el-button @click="showDetail(scope.row)" size="mini" style="margin:0 0px 10px 10px;">认证信息
                        </el-button>
                        <el-button @click="toAddSeller(scope.row.id)" size="mini" style="margin:0 0px 10px 10px;">编辑
                        </el-button>
                        <el-button
                            v-if="scope.row.checkStatus === 0"
                            size="mini"
                            style="margin:0 0px 10px 10px;"
                            @click="showUpdate(scope.row,2)"
                        >拒绝
                        </el-button>

                        <el-popconfirm
                            v-if="scope.row.checkStatus == 0"
                            title="确定通过商家认证吗？"
                            @onConfirm="showUpdate(scope.row,1)"
                        >
                            <el-button slot="reference" size="mini" type="success" style="margin:0 0px 10px 10px;">同意
                            </el-button>
                        </el-popconfirm>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <Detail ref="detailRef" @refresh="getPage()"/>
        </div>
    </section>
</template>
<script>
import {sellerApi} from '@/api/user/sellerApi'
import {Message, MessageBox} from 'element-ui'
import Detail from './Detail.vue'


export default {
    name: 'UserSellerList',
    components: {
        Detail
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                uid:'',
                companyName: '',
                companyCode: '',
                companyLegalPerson: '',
                companyLegalPersonIdCard: '',
                companyLegalPersonMobile: '',
                contactName: '',
                contactMobile: '',
                checkStatus: ''
            },
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                uid: this.filter.uid,
                companyName: this.filter.companyName,
                companyCode: this.filter.companyCode,
                companyLegalPerson: this.filter.companyLegalPerson,
                companyLegalPersonIdCard: this.filter.companyLegalPersonIdCard,
                companyLegalPersonMobile: this.filter.companyLegalPersonMobile,
                contactName: this.filter.contactName,
                contactMobile: this.filter.contactMobile,
                checkStatus: this.filter.checkStatus
            }

            this.loading = true
            sellerApi.getPage(params).then((response) => {
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 删除数据
        handleDelete(id) {
            sellerApi.delete(id)
                .then((response) => {
                    this.getPage()
                })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showUpdate(data, type) {
            if (type === 2) {
                MessageBox.prompt('请填写拒绝原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            if (instance.inputValue.length < 10) {
                                Message({
                                    message: '内容不能少于10个字',
                                    type: 'warning'
                                })
                            } else {
                                done()
                            }
                        } else {
                            done()
                        }
                    }
                })
                    .then(({value}) => {
                        const param = {
                            'id': data.id,
                            'checkStatus': type,
                            'remark': value
                        }

                        sellerApi.checkSeller(param).then((response) => {
                            this.getPage()
                        })
                    })
                    .catch(() => {

                    })
            } else {
                const param = {
                    'id': data.id,
                    'checkStatus': type
                }
                sellerApi.checkSeller(param).then((response) => {
                    this.getPage()
                })
            }
        },

        showDetail(data) {
            this.$refs['detailRef'].showDetail(data)
        },

        toAddSeller(id) {
            this.$router.push('/user/sellerAdd?id=' + id)
        },
        resetFilter() {
            this.$refs['filterRef'].resetFields()
            this.getPage()
        },
    }
}

</script>

<style lang="scss" scoped></style>
